<template>
	<view class="height-screen">
		<cu-custom bgColor="bg-white" isBack>
			<block slot="content">{{$t('group.title')}}</block>
		</cu-custom>
		<view class="bg-white radius-xs padding">
			<view class="padding-bottom flex align-center u-border-bottom">
				<image :src="helper.handleImage(groupInfo.avatar)" class="flex-shrink round"
					style="width: 79rpx;height: 79rpx;" />
				<view class="margin-left flex flex-direction flex-sub">
					<text class="text-df font-bold text-black margin-bottom-xs">{{groupInfo.nickname}}</text>
					<image v-if="groupInfo.gender == 0" src="@/static/img/sexType.png"
						style="width: 35rpx;height: 35rpx;" />
					<div v-else
						style="width: 37rpx;height: 37rpx;border-radius: 36rpx;background-color: #CBE3ED;text-align: center;line-height: 35rpx;">
						<u-icon name="man" color="#2979ff" size="18"></u-icon>
					</div>
				</view>
			</view>
			<view class="grid gap-sm padding-top">
				<text class="text-lg font-bold text-black">{{groupInfo.title}}</text>
				<text class="text-df font-400 text-black">{{groupInfo.content}}</text>
				<view class="" v-if="groupInfo.images.length" style="width:100%;display: flex;flex-wrap: wrap;">
					<image style="height: 215rpx;width:33.33%;" v-for="(imgItem,imgIndex) in imageList" :key="imgIndex"
						:src="imgItem" mode="aspectFill" @click="handleBigimg(imageList,imgIndex)" />
					<!-- <video style="height: 215rpx;width:33.33%;border-radius: 20rpx;"
						:src="helper.handleImage(groupInfo.video_files)" show-mute-btn v-if="groupInfo.video_files" /> -->
					<!-- <view v-if="groupInfo.video_files" class="" style="height: 215rpx;width:33.33%">
						<hello :src="helper.handleImage(groupInfo.video_files)" class="video">
						</hello>
					</view> -->

				</view>


				<view v-if="groupInfo.video_files!=''" class="" style="height: 500rpx;">
					<!-- <DomVideoPlayer v-if="groupInfo.video_files" :src="helper.handleImage(groupInfo.video_files)"
						ref="domVideoPlayer" autoplay loop controls muted :autoplay="false" /> -->

					<detailvideo v-if="groupInfo.video_files" :src="helper.handleImage(groupInfo.video_files)"
						class="video">
					</detailvideo>
				</view>
				<view class="flex justify-end">
					<view class="flex justify-end">
						<view class="flex align-center">
							<image src="@/static/img/good.png" style="width: 28rpx;height: 29rpx;"
								v-if="groupInfo.praise_status==0" @tap.stop="handleLike(0)" />
							<image src="@/static/img/goodActive.png" style="width: 28rpx;height: 29rpx;" v-else
								@tap.stop="handleLike(1)" />
							<text class="text-df font-400 text-black margin-left-xs">{{$t('group.like')}}</text>
						</view>
						<view class="flex align-center margin-left-lg" @tap.stop="handleComment">
							<image src="@/static/img/replay.png" style="width: 34rpx;height: 30rpx;" />
							<text class="text-df font-400 text-black margin-left-xs">{{$t('group.comment')}}</text>
						</view>

						<view class="flex align-center margin-left-lg" @tap.stop="handleReport">
							<view class="">
								<u-icon name="info-circle" color="#333333"></u-icon>
							</view>
							<text class="text-df font-400 text-black margin-left-xs">{{$t('group.report')}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-white margin-top-sm padding-lr flex flex-direction">
			<text class="font-bold text-xl text-black padding-tb">{{$t('group.commentList')}}</text>
			<view class="grid gap-sm padding-tb-sm u-border-bottom" v-for="(item,index) in groupInfo.comment_lists"
				:key="index">
				<view class="padding-bottom-sm flex align-center ">
					<image :src="helper.handleImage(item.avatar)" class="flex-shrink round"
						style="width: 79rpx;height: 79rpx;" />
					<view class="margin-left flex flex-direction flex-sub">
						<text class="text-df font-bold text-black margin-bottom-xs">{{item.nickname}}</text>
						<text class="text-sm text-gray">{{item.createtime | handleDateTime('YYYY-MM-DD HH:mm')}}</text>
					</view>
				</view>
				<text class="text-df font-400 text-black">{{item.msg}}</text>
			</view>
			<section class="empty" v-if="!groupInfo.comment_lists.length">
				<u-empty mode="list" :text="$t('list.empty')" />
			</section>
		</view>

		<submitComment ref="submitComment" @submitComment="submitComment" />
	</view>
</template>

<script>
	import DomVideoPlayer from '@/components/DomVideoPlayer/DomVideoPlayer';
	import {
		articleInfo,
		praise_add,
		praise_del,
		commentAdd
	} from '@/apis'
	import submitComment from '@/components/submitComment.vue'
	export default {
		components: {
			submitComment,
			DomVideoPlayer
		},
		data() {
			return {
				id: null,
				groupInfo: {
					comment_lists: [],
					images: []
				},
				imageList: [],
			}
		},
		onLoad(options) {
			this.id = options.id
			this.articleInfo()
		},
		onShow() {},
		methods: {
			async articleInfo() {
				this.imageList = []
				const res = await articleInfo({
					id: this.id
				})
				res.images = res.images.split(',')
				this.groupInfo = res
				if (this.groupInfo.images.length > 0) {
					this.groupInfo.images.forEach((item, index) => {
						this.imageList.push("https://www.slem.com.au" + item)
					})
				} else {
					this.imageList = []
				}
				console.log("this.imageList", this.imageList)
			},
			async handleLike(isDel) {
				if (isDel == 0) {
					await praise_add({
						article_id: this.id
					})
				} else {
					await praise_del({
						article_id: this.id
					})
				}
				this.groupInfo.praise_status = this.groupInfo.praise_status == 0 ? 1 : 0
			},
			handleComment() {
				this.$refs.submitComment.opencomment()
			},
			handleReport() {
				uni.showToast({
					title: uni.getStorageSync("lang") == "zh-cn" ? "举报成功" : "Report success",
				})
			},
			async submitComment(event) {
				await commentAdd({
					article_id: this.id,
					msg: event
				})
				this.helper.showToast(this.$t('message.success'))
				await this.helper.delay(1000, () => {
					this.articleInfo()
				})
			},
			handleBigimg(imglIST, index) {
				console.log(imglIST)
				uni.previewImage({
					urls: imglIST, // 图片的链接列表
					current: index, // 当前显示图片的链接索引
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
</style>